<template>
  <!--------------------- 我的团队列表 --------------------
* @auto kyle
* @date 2020-12-20
  -->
  <div class="pos-r  bg-white  br-8 mb-24">
    <div class="pos-r flex bg-white ptb-32 plr-24 br-8 hb">
      <headPortrait-box
        class="img-box pos-r br-full is-80 flex-s-0"
        :head-portrait-url="data.UserFace"
      />
      <div class="flex-1 mlr-28">
        <p class="fs-28 ">
          <span class="fw-b fs-32">{{ data.UserName }}</span>
          <span v-if="data.UserGradeName" class="level fs-20 bg-second">{{ data.UserGradeName }}</span>
        </p>
        <p class="color-gray fs-28">{{ data.UserTel }}</p>
      </div>
      <div class="flex-s-0 tac">
        <p class=" fs-40 color-primary">{{ data.ProductBuyCount||0 }}</p>
        <p class="color-gray">购买数量</p>
      </div>
    </div>
    <div class="flex-s-c color-gray-light ptb-20 plr-24">
      <p>订单号：{{ data.Sn }}</p>
      <p>{{ data.AddTime }}</p>
    </div>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
export default {
  name: 'DetailItem',
  components: { headPortraitBox },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      headUrl: ''
    }
  },

  computed: {

  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
  .level{
    font-size: 20px;
    color: #fff;
    margin-left: 10px;
    padding: 2px 8px ;
    border-radius: 40px 40px 40px 0;
  }
</style>

